<template>
  <div>
    <!-- 头部 -->
    <el-card style="margin:20px;">
      <el-form :model="nodeObj" :inline="true">
        <el-form-item label="点位搜索:">
          <el-input v-model="nodeObj.name" placeholder="请输入" style="width:150px" clearable />
        </el-form-item>
        <el-form-item label="区域搜索:">
          <el-select v-model="nodeObj.regionId" placeholder="请选择" clearable>
            <el-option
              v-for="item in nodeList"
              :key="item.id"
              :label="item.region.name"
              :value="item.region.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin:20px;">
      <el-button icon="el-icon-circle-plus-outline" type="warning" @click="showAddDialog">新建</el-button>
      <!-- 表格区 -->
      <el-table
        v-loading="loading"
        :data="nodeList"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
        />
        <el-table-column
          prop="name"
          label="点位名称"
        />
        <el-table-column
          prop="region.name"
          label="所在区域"
        />
        <el-table-column
          prop="businessType.name"
          label="商圈类型"
        />
        <el-table-column
          prop="ownerName"
          label="合作商"
        />
        <el-table-column
          label="详细地址"
        >
          <template #default="{row}">
            {{ row.addr.split('-').at(-1) }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="180"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="lookBtn(scope.row)">查看详情</el-button>
            <el-button type="text" size="small" @click="showAddDialog(scope.row)">修改</el-button>
            <el-button type="text" size="small" style="color:red;" @click="delBtn(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        layout="slot"
        :total="totalPage"
      >
        <span class="left">共{{ totalCount }}条记录 第{{ pageIndex }}/{{ totalPage }}页</span>
        <div class="btns">
          <button class="btn" :disabled="pageIndex===1" @click="dowmFn(-1)"><span>上一页</span></button>
          <button class="btn" :disabled="pageIndex===totalPage" @click="dowmFn(1)"><span>下一页</span></button>
        </div>
      </el-pagination>
      <!-- 新增dialog -->
      <nodeAddDiaVue
        ref="addRef"
        :add-dialog="addDialogVisib"
        :partner="partner"
        :node-list="nodeList"
        :look-dialog="lookDialog"
        :detail-list="detailList"
        :edit-obj="editObj"
        @getNodeList="getNodeList"
        @closeDia="closeaddVis"
        @closeLook="closeLookDialog"
      />
    </el-card>
  </div>
</template>

<script>
import { TextToCode } from 'element-china-area-data'
import { getTime } from '@/utils/getTimer.js'
import { lookRegApi, partnerList, delnood, nodeDetail } from '@/api'
import nodeAddDiaVue from './nodeAddDia.vue'
export default {
  components: { nodeAddDiaVue },
  data() {
    return {
      // 查看详情list
      editDialog: false,
      detailList: [],
      addDialogVisib: false,
      lookDialog: false,
      totalCount: 0,
      totalPage: 0,
      pageIndex: 1,
      pageSize: 10,
      editObj: {},
      nodeList: [], // 区域列表
      // 区域对象
      nodeObj: {
        name: '',
        regionId: ''
      },
      // 合作商名称
      partner: [],
      loading: false
    }
  },
  created() {
    this.getNodeList()
  },
  methods: {
    // 点击打开编辑
    changeBtn() {
      this.editDialog = true
    },
    // 打开查看详情
    async lookBtn(val) {
      // console.log(val)
      this.lookDialog = true
      const { data } = await nodeDetail(val.id)
      // console.log(data)
      this.detailList = data
      this.detailList.innerCode = data.innerCode
      this.detailList.vmStatus = data.vmStatus
      this.detailList.forEach(item => {
        item.lastSupplyTime = getTime(data.innerCode)
      })
    },
    // 关闭查看详情
    closeLookDialog() {
      this.lookDialog = false
    },
    // 打开新增dia
    showAddDialog(val) {
      if (val.id) {
        this.$refs.addRef.addObj = val
        const arr = val.addr.split('-')
        this.$refs.addRef.addObj.addr = val.addr.split('-').at(-1)
        try {
          this.$refs.addRef.selectedOptions = [TextToCode[arr[0]].code, TextToCode[arr[0]][arr[1]].code, TextToCode[arr[0]][arr[1]][arr[2]].code]
        } catch (err) {
          console.log(err)
        }
        console.log(arr)
      }
      // console.log(val)
      this.addDialogVisib = true
    },
    // 关闭新增dia
    closeaddVis() {
      this.addDialogVisib = false
    },
    // 删除
    async delBtn(val) {
      // console.log(val)
      await delnood({ id: val.id })
      this.$message.success('删除成功')
      this.getNodeList()
    },
    // 获取区域详情
    async getNodeList() {
      this.loading = true
      const res = await lookRegApi({ pageIndex: this.pageIndex, pageSize: this.pageSize, ...this.nodeObj })
      console.log(res, '区域详情')
      this.nodeList = res.data.currentPageRecords
      this.totalCount = Number(res.data.totalCount)
      this.pageIndex = Number(res.data.pageIndex)
      this.totalPage = Number(res.data.totalPage)
      const res2 = await partnerList({ pageIndex: 1, pageSize: 100000 })
      // console.log(res2)
      // 合作商名称
      this.partner = res2.data.currentPageRecords
      this.loading = false
    },
    // 翻页
    dowmFn(val) {
      this.pageIndex += val
      this.getNodeList()
    },
    // 查询地区
    onSubmit() {
      this.getNodeList()
    }
  }
}
</script>

<style>

</style>
